<template>
  <view class="giftbox-gift-section">
    <!-- 顶部标题 -->
    <view class="giftbox-section-title">
      <image
        src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173372548867568d30cae1d.png"
        mode="aspectFit"
        class="giftbox-title-img"
      />
    </view>

    <!-- 分类列表 -->
    <view class="giftbox-category-list" :style="listStyle">
      <view class="list-inner" :style="{ transform: 'translateZ(0)' }">
        <!-- 始终显示的前4个 -->
        <view
          v-for="(category, index) in initialCategories"
          :key="category.id"
          class="giftbox-category-item"
          @tap="handleCategoryClick(category, index)"
        >
          <image
            :src="category.image"
            mode="aspectFill"
            class="giftbox-category-img"
          />
        </view>
        
      
      </view>
        <!-- 展开时显示的其余项 -->
        <view 
          v-if="isExpanded"
          class="expanded-items"
          :style="{ 
            transform: `translateY(${contentOpacity ? '0' : '20rpx'})`,
            opacity: contentOpacity 
          }"
        >

          <view
            style="margin-top: 30rpx;"
            v-for="(category, index) in expandedCategories"
            :key="category.id"
            class="giftbox-category-item"
            :class="{ 'giftbox-last': index === expandedCategories.length - 1 }"
            @tap="handleCategoryClick(category, index + initialDisplayCount)"
          >
            <image
              :src="category.image"
              mode="aspectFill"
              class="giftbox-category-img"
            />
          </view>
        </view>
    </view>

    <!-- 查看更多按钮 -->
    <view class="giftbox-view-more" @tap="handleViewMoreOne">
      <text class="feiIconfont" :class="{ 'icon-shouqi2': isExpanded, 'icon-gengduo': !isExpanded }" style="margin: 20rpx"></text>
      <text style="color: #767676; font-size: 28rpx">{{ isExpanded ? '收起' : '查看更多' }}</text>
    </view>
  </view>
</template>
<script>
import specialData from './mockData.js'

export default {
data() {
  return {
    categories: [],
    isExpanded: false,
    initialDisplayCount: 4,
    itemHeight: 244,
    itemGap: 30,
    contentOpacity: 1,
  };
},
computed: {
  initialCategories() {
    return this.categories.slice(0, this.initialDisplayCount);
  },
  expandedCategories() {
    return this.categories.slice(this.initialDisplayCount);
  },
  listStyle() {
    if (!this.categories?.length) {
      return {
        height: '0rpx',
        transition: 'height 0.8s cubic-bezier(0.4, 0, 0.2, 1)',
        overflow: 'hidden',
        willChange: 'height, opacity',
        transform: 'translateZ(0)'
      };
    }
    
    const collapsedHeight = (this.itemHeight + this.itemGap) * this.initialDisplayCount;
    const expandedHeight = (this.itemHeight + this.itemGap) * this.categories.length;
    
    return {
      height: this.isExpanded ? `${expandedHeight}rpx` : `${collapsedHeight}rpx`,
      transition: 'height 0.8s cubic-bezier(0.4, 0, 0.2, 1)',
      overflow: 'hidden',
      willChange: 'height, opacity',
      transform: 'translateZ(0)'
    };
  }
},
created() {
  this.categories = specialData.categories || [];
},
methods: {
  handleViewMoreOne() {
    if (this.isExpanded) {
      // 收起时，先淡出额外项
      this.contentOpacity = 0;
      setTimeout(() => {
        this.isExpanded = false;
      }, 400);
    } else {
      // 展开时，先设置状态，然后  入
      this.isExpanded = true;
      this.contentOpacity = 0;
      setTimeout(() => {
        this.contentOpacity = 1;
      }, 50);
    }
  },
  handleCategoryClick(category, index) {
    const categoryData = encodeURIComponent(JSON.stringify(category));
    uni.navigateTo({
      url: `/pages/mer/tabbar/specialDetails/gift_box_details?categoryData=${categoryData}`
    });
  },
},
};
</script>



<style lang="scss" scoped>
.giftbox-gift-section {
max-width: 750rpx;
margin: 0 auto;
padding: 20rpx;
background-color: #fff;
}

.giftbox-section-title {
margin-bottom: 20rpx;
}

.giftbox-title-img {
width: 100%;
height: 80rpx;
/* 根据实际图片调整高度 */
}

.giftbox-category-list {
position: relative;
will-change: height;
transform: translateZ(0);
backface-visibility: hidden;

.list-inner {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  transform: translateZ(0);
  transition: opacity 0.4s ease-in-out;
  will-change: opacity, transform;
}

.expanded-items {
  transition: all 0.4s ease-in-out;
  will-change: opacity, transform;
}
}

.giftbox-category-item {
position: relative;
height: 244rpx;
overflow: hidden;
}

.giftbox-category-img {
width: 100%;
height: 100%;
}

.giftbox-category-text {
position: absolute;
left: 40rpx;
bottom: 40rpx;
color: white;
}

.giftbox-category-text .giftbox-title {
font-size: 48rpx;
display: block;
}

.giftbox-category-text .giftbox-subtitle {
font-size: 32rpx;
display: block;
margin-top: 10rpx;
}

.giftbox-category-item.giftbox-last {
height: 244rpx;
}

.giftbox-view-more {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20rpx 0;

.feiIconfont {
  transition: transform 0.4s ease-in-out;
  display: inline-block;
  will-change: transform;
  
  &.icon-Group- {
    transform: rotate(180deg);
  }
}
}
</style>
